{% load static %}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Cyphon | Login</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css" />
    <link rel="stylesheet" href="{% static 'css/login.css' %}">
  </head>
  <body>
    <div class="login">
      <div class="login__header">
        <img class="login__logo" alt="Cyphon" src="{% static 'images/cyphon-logo.svg' %}">
        <h1 class="login__title">Login</h1>
        <a href="{% url 'admin:index' %}">
          <button class="login__button" >Admin</button>
        </a>
      </div>
      <div class="login__content">
        {% if form.non_field_errors %}
          <div class="login__errors">
            {% for error in form.non_field_errors %}
              <div>{{ error }}</div>
            {% endfor %}
          </div>
        {% endif %}
        <form method="post" action="{% url 'login' %}">
          {% csrf_token %}
          <div class="login__input-group">
            {{ form.username.label_tag }}
            {{ form.username }}
            {% if form.username.errors %}
            {% for error in form.username.errors %}
              <div class="login__input-error">{{ error }}</div>
            {% endfor %}
          {% endif %}
          </div>

          <div class="login__input-group">
            {{ form.password.label_tag }}
            {{ form.password }}
            {% if form.password.errors %}
            {% for error in form.password.errors %}
              <div class="login__input-error">{{ error }}</div>
            {% endfor %}
          {% endif %}
          </div>
          <input class="login__button login__button--block" type="submit" value="Login" />
          <input type="hidden" name="next" value="{{ next }}" />
        </form>
      </div>
    </div>
  </body>
</html>